<template>
	<div class="layout-main">
		<div class="section">			
			<el-table border :data="tableData.data" style="width: 100%">
				<el-table-column resizable='false' fixed="right" label="操作" width="260">
					<template slot-scope="scope">
						<router-link :to="{ path: '/manage/add', query: {id: scope.row.id}}"><i class="iconfont icon-bianji"></i></router-link>
						<a href="javascript:;" class="" @click.prevent="del(scope.row.id)"><i class="iconfont icon-shanchu"></i></a>
						<el-switch v-model="scope.row.id" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
					</template>
				</el-table-column>
				<el-table-column resizable='false' label="账号">
					<template slot-scope="scope">							
						<span class="title-name">{{scope.row.username}}</span>
					</template>
				</el-table-column>
				<el-table-column resizable='false' label="密码" prop="password"></el-table-column>
				<el-table-column resizable='false' label="授权">
					<template slot-scope="scope">
						 <el-select v-model="scope.row.name" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-if="tableData.total" :current-page="tableData.filter.pageBean.pageIndex" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
			 :page-size="tableData.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="sizeChange"
			 @current-change="currentChange"></el-pagination>
		</div>

		<!-- 取消提案 -->
		<layer :data="cencalLayer" @on-ok="cancelApplyLayer"></layer>
	</div>
</template>
<script>	
	import { TreeToArray } from '@/utils'
	import '@/assets/less/modules/switch.less'
	export default {
		data() {
			return {
				//当前登录用户
				clueId: '',				
				// 角色列表
				roleList: [],
				roleForm: {
					name: ''
				},
				targetActive: true,
				targetForm: {
					id: 0
				},
				superiorUser: [],
				cencalLayer: {
					title: '取消提案',
					show: false,
					tips: '确定取消提案？'
				},
				tableData:{
					data:[{
						src: 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png',
						id:1,
						username:'大大滴好',
						password: '333333333'
					}]
				}
			}
		},
		mounted() {
			this.$store.commit('breadData', {
				pageName:'配置与接口',
				tabs:[
					{
						label: '管理员设置',
						name: 'group',
						tab: '0',
					}
				]
			})
		},		
		methods: {
			// 弹窗-提案申请
			showApplyLayer(id) {	
				this.applyInfo.data = {}
				this.applyInfo.data.id = id
				this.applyInfo.show = true

				this.roleForm = {}
				this.targetForm = {}
				this.superiorUser = []				
			},			
			// 取消提案
			showCancelApplyLayer(id) {
				this.cencalLayer.show = true
				this.clueId = id
			},
			cancelApplyLayer(id) {
				api.cancelClue({ id: this.clueId }).then(res => {
					if (res == 'success') {
						this.$msg({ message: '取消提案成功', type: 'success' })
						this.sumbitSave()
						this.cencalLayer.show = false
						this.$store.dispatch('getUnProcess')
					}
				}).catch(res => {
					console.log(res)
				})
			}

		}
	}
</script>